<!DOCTYPE html>
<html>
    <head>

        <link rel="canonical" href="http://www.jointjs.com/" />
        <meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
        <meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />

        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

        <link rel="stylesheet" href="css/tutorial.css" />
        <link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">

        <!-- Dependencies: -->
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="../node_modules/lodash/lodash.js"></script>
        <script src="../node_modules/backbone/backbone.js"></script>

        <link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
        <script type="text/javascript" src="../build/joint.min.js"></script>

        <title>JointJS - JavaScript diagramming library - Getting started.</title>

    </head>
    <body class="language-javascript tutorial-page">

        <script>
            SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
                return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
            };
        </script>
        <div class="tutorial">

            <h2>Intermediate Tutorial</h2>

            <p>In the <a href="hello-world.html">basic section of the tutorial</a>, we learned how to create a simple
                JointJS application.
                By now, you should be able to:</p>

            <ul>
                <li><a href="installation.html">Install JointJS and include it in your pages</a></li>
                <li><a href="graph-and-paper.html">Create a graph and a paper</a></li>
                <li><a href="elements.html">Add simple elements to the diagram</a></li>
                <li><a href="links.html">Connect elements with simple links</a></li>
            </ul>

            <p>In other words, you should be able to turn a simple <a href="hello-world.html">Hello, World!</a>
                application...</p>

            <div class="paper" id="paper-hello-world"></div>

            <p>...into an <a href="links.html">amazing diagram</a> like this one:</p>

            <div class="paper" id="paper-links"></div>

            <p>In this section of the tutorial, we will go one step further, to understand more involved topics that
                allow us to customize our diagrams more fully:</p>

            <ul>
                <li><a href="special-attributes.html">JointJS special attributes</a></li>
                <li><a href="events.html">Events (interaction)</a></li>
                <li><a href="serialization.html">Data serialization (persistence)</a></li>
                <li><a href="custom-elements.html">Defining custom elements</a></li>
                <li><a href="custom-links.html">Defining custom links</a></li>
                <li><a href="link-labels.html">Link labels</a></li>
                <li><a href="link-tools.html">Link tools</a></li>
            </ul>

            <p>We will look at each of these steps in turn.
                Use this list as an index of the intermediate tutorial topics.</p>

            <p>Let's start with <a href="special-attributes.html">JointJS special attributes</a>.</p>

        </div><!--end tutorial-->

        <script src="../node_modules/prismjs/prism.js"></script>

        <script src="js/hello-world.js"></script>
        <script src="js/links.js"></script>
    </body>
</html>
